<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="确认开票"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 账单信息 -->
      <view class="section">
        <view class="section-title">账单信息</view>

        <view class="info-item">
          <text class="info-label">账单ID：</text>
          <text class="info-value">{{ billInfo.id }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">账单数量：</text>
          <text class="info-value">{{ billInfo.quantity }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">应开票金额：</text>
          <text class="info-value amount">{{ billInfo.amount }}元</text>
        </view>
      </view>

      <!-- 发票信息 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">发票信息</text>
          <text class="edit-btn" @click="handleEdit">修改</text>
        </view>

        <view class="info-item">
          <text class="info-label">发票介质</text>
          <text class="info-value">{{ invoiceInfo.medium }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">抬头类型</text>
          <text class="info-value">{{ invoiceInfo.titleType }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">发票类型</text>
          <text class="info-value">{{ invoiceInfo.invoiceType }}</text>
        </view>

        <view class="info-item vertical">
          <text class="info-label">发票抬头</text>
          <text class="info-value">{{ invoiceInfo.title }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">纳税人识别号</text>
          <text class="info-value">{{ invoiceInfo.taxNumber }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">开户银行</text>
          <text class="info-value">{{ invoiceInfo.bank || "-" }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">开户账号</text>
          <text class="info-value">{{ invoiceInfo.bankAccount || "-" }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">注册地址</text>
          <text class="info-value">{{ invoiceInfo.address || "-" }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">注册电话</text>
          <text class="info-value">{{ invoiceInfo.phone || "-" }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">发票备注</text>
          <text class="info-value">{{ invoiceInfo.remark || "-" }}</text>
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="footer-action">
      <view class="confirm-btn" @click="handleConfirm">
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 账单信息
const billInfo = ref({
  id: "",
  quantity: 0,
  amount: "0.00",
});

// 发票信息
const invoiceInfo = ref({
  medium: "数电发票",
  titleType: "",
  invoiceType: "",
  title: "",
  taxNumber: "",
  bank: "",
  bankAccount: "",
  address: "",
  phone: "",
  remark: "",
});

// 接收路由参数
onLoad((options) => {
  if (options.billId) {
    loadBillInfo(options.billId);
    loadInvoiceInfo();
  }
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 加载账单信息
const loadBillInfo = async (billId) => {
  try {
    // TODO: 调用真实API
    // 模拟数据
    billInfo.value = {
      id: billId || "197873629416062792",
      quantity: 1,
      amount: "0.21",
    };
  } catch (error) {
    console.error("加载账单信息失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

// 加载发票信息
const loadInvoiceInfo = async () => {
  try {
    // TODO: 调用真实API
    // 模拟数据
    invoiceInfo.value = {
      medium: "数电发票",
      titleType: "",
      invoiceType: "",
      title: "杭州临安嘉智行源信息咨询工作室（个体工商户）",
      taxNumber: "92330185MAD4WNGK74",
      bank: "",
      bankAccount: "",
      address: "",
      phone: "",
      remark: "",
    };
  } catch (error) {
    console.error("加载发票信息失败:", error);
  }
};

// 修改发票信息
const handleEdit = () => {
  uni.navigateTo({
    url: "/pages/mine/invoice/editInvoiceInfo",
  });
};

// 确认提交
const handleConfirm = () => {
  // TODO: 调用API提交开票申请
  uni.showToast({
    title: "开票申请已提交",
    icon: "none",
  });

  // 延迟返回
  setTimeout(() => {
    uni.navigateBack({
      delta: 1,
    });
  }, 1500);
};

onMounted(() => {
  // 组件挂载后的操作
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-bottom: 160rpx;
}

// 区块
.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 32rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.edit-btn {
  font-size: 28rpx;
  color: #ff9500;

  &:active {
    opacity: 0.7;
  }
}

// 信息项
.info-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &.vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 12rpx;
  }

  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  font-size: 28rpx;
  color: #666;
  min-width: 200rpx;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
  word-break: break-all;

  &.amount {
    color: #ff4d4f;
    font-weight: 600;
  }

  .vertical & {
    text-align: left;
    width: 100%;
  }
}

// 底部操作按钮
.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
}

.confirm-btn {
  height: 88rpx;
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  font-weight: 600;

  &:active {
    opacity: 0.9;
  }
}
</style>
